<template>
  <view class="warp">
    <!-- <img
      src="https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132"
      alt="头像"
    /> -->

    <u-navbar bgColor="#0986FF" :placeholder="true">
      <template #center>
        <div>首页</div>
      </template>
      <template #left></template>
      >
    </u-navbar>
    <view
      class="f ac"
      style="
        height: 26vh;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #fff;
      "
    >
      <image
        class="mt20r"
        src="../../static/logo.jpg"
        lazy-load="false"
        binderror=""
        style="height: 360rpx; width: 360rpx"
        bindload=""
      ></image>
    </view>
    <view>
      <view class="index_top mt10r ovh">
        <view class="index_warp">
          <!--       previousMargin="30"
                            nextMargin="30"
                            circular   :autoplay="false"     -->
          <u-swiper
            :list="CarouselImgList"
            height="220"
            imgMode="heightFix"
            keyName="imgUrl"
            radius="5"
            :autoplay="false"
            @click="showimg"
          ></u-swiper>
        </view>
      </view>
      <view class="rds20r mt20r" style="padding: 0 20rpx; background: #fff">
        <view class="f ac xb" style="padding: 30rpx 0; flex-wrap: wrap">
          <view
            class="content mb20r"
            v-for="i in baseList"
            @click="choose(i)"
            :key="i.id"
          >
            <view class="svg" style="position: relative">
              <image
                :src="i.icon"
                style="width: 100rpx; height: 100rpx"
              ></image>
              <view class="red-dot" v-if="i.id == 5 && num > 0">
                <text class="number">{{ num }}</text>
                <!-- 数字 -->
              </view>
            </view>
            <view class="text">{{ i.title }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import drag from "../../components/beyondGod-drag/x-drag.vue";
import {
  getBanner,
  getMenuList,
  getByStudent,
  getCount,
} from "../../api/index";
import floatBtn from "@/components/float-btn/float-btn.vue";
import { debounce } from "@/common/util.js";
export default {
  components: {
    drag,
    floatBtn,
  },
  data() {
    return {
      webStyle: {
        width: "100%",
        height: "100%",
      },
      num: 0,
      baseList: [
        {
          name: "photo",
          title: "ai助教",
        },
        {
          name: "lock",
          title: "随堂测验",
        },
        {
          name: "star",
          title: "孵化基地",
        },
        {
          name: "star",
          title: "免疫科普",
        },
        {
          name: "star",
          title: "问题反馈",
        },
        {
          name: "star",
          title: "课程思政",
        },
        {
          name: "star",
          title: "前沿进展",
        },
        {
          name: "star",
          title: "Idec比赛",
        },
      ],
      title: "Hello",
      isHidden: false,
      iconUrl: require("static/suggest_icon.png"),
      keyword: "",
      userInfo: "",
      webUrl: "http://mofeishi.dh.cx/c291f",
      productList: [],
      CarouselImgList: [],
      showTabber: true,
    };
  },
  onPageScroll() {
    const that = this;
    that.isHidden = true;
    debounce(function () {
      that.isHidden = false;
    }, 500);
  },
  onShow() {
    this.getCount();
  },
  onLoad() {
    this.getMenuList();
    this.getBanner();
    wx.showShareMenu({
      withShareTicket: true,
      menus: ["shareAppMessage", "shareTimeline"],
    });
    // if (uni.getStorageSync("showGwc") != 1) {
    //   this.showTabber = false;
    // }
    // if (!uni.getStorageSync("token")) {
    //   uni.reLaunch({
    //     url: "/pages/login/index",
    //   });
    // } else {

    // }
  },

  onShareAppMessage() {
    return {
      title: "思行新青",
    };
  },
  // 分享到朋友圈
  onShareTimeline() {
    return {
      title: "思行新青",
    };
  },
  methods: {
    getCount() {
      getCount().then((res) => {
        this.num = res.data;
      });
    },

    getMenuList() {
      getMenuList("id").then((res) => {
        console.log(res, "sssssssssssss");
        this.baseList = res.rows;
      });
    },
    getBanner() {
      getBanner("id").then((res) => {
        console.log(res, "sadasdasdas");
        this.CarouselImgList = res.rows;
      });
    },
    focus() {
      uni.navigateTo({
        url: `/pages/index/searchpro`,
      });
    },
    choose(i) {
      console.log(i, "wwwwwwww");
      if (i.id == "1") {
        uni.switchTab({
          url: `/pages/aiChat/index`,
        });
      } else if (i.id == "2") {
        uni.switchTab({
          url: `/pages/answer/index`,
        });
      } else if (i.id == 3) {
        uni.navigateTo({
          url: "/pages/teacher/index",
        });
      } else if (i.id == 4) {
        uni.navigateTo({
          url: "/pages/kepu/index",
        });
      } else if (i.id == "5") {
        uni.navigateTo({
          url: "/pages/complaint/index",
        });
      } else if (i.id == "6") {
        uni.navigateTo({
          url: "/pages/kc/index",
        });
      } else if (i.id == "7") {
        uni.navigateTo({
          url: "/pages/qy/index",
        });
      }
    },
    dragClick() {
      console.log(222222222222);
      uni.navigateTo({
        url: "/pages/words/index",
      });
    },
    showimg(e) {
      let params = this.CarouselImgList[e];
      if (params.modelId == 4) {
        uni.navigateTo({
          url: `/pages/kepu/detail?id=${params.modelDetailId}`,
        });
      }
      if (params.modelId == 3) {
        uni.navigateTo({
          url: `/pages/teacher/detail?id=${params.modelDetailId}`,
        });
      }
      // uni.previewImage({
      //   // 正常应该是网络地址，这里为了方便，直接用本地图片
      //   urls: [this.CarouselImgList[e].imgUrl],
      //   // urls: [`http://127.0.0.1:27050/__pageframe__/static/image/${url}.png`]
      //   current: this.CarouselImgList[e]
      // })

      // let arr = this.CarouselImgList.map((x) => x.imgUrl);
      // uni.previewImage({
      //   urls: arr,
      //   current: e,
      // });
    },
    // 获取轮播图

    search() {
      this.getList(1, 10);
    },

    goGoods(item) {
      uni.navigateTo({
        url: `/pages/goods/index?Id=${item.id}`,
      });
    },
    async getUserInfo() {
      const { data } = await getuserInfo();
      this.userInfo = data;
      let flag =
        (data.remark == 2 && data.vip == 1) || data.remark == 3 ? 1 : 2;
      uni.setStorageSync("showGwc", flag);
    },
    gojdweb(type) {
      uni.navigateTo({
        url: "/pages/achievement/index",
      });
    },
    ticket() {
      uni.navigateTo({
        url: "/pages/ticket/index",
      });
    },
    contact() {
      uni.navigateTo({
        url: "/pages/index/search",
      });
    },
  },
};
</script>

<style lang="scss">
.warp {
  margin-bottom: 50rpx;
}
.consult-button {
  background-color: #f9f9f9;
  color: #333;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  font-size: 16px;
}

.consult-button:hover {
  background-color: #eaeaea;
}

.consult-button:focus {
  outline: none;
}

::v-deep .z-paging-content {
}

.card {
  border-radius: 10rpx; /* 边框圆角 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  border: 1px solid #ebeef5; /* 边框颜色 */
  background-color: #fff;
}

page {
  background: #f1f1f1;
}

.index_top {
  width: 100%;
  height: 430rpx;
  background: #fff;
  padding: 10rpx 0;
}

.bgff {
  background-color: #f1f1f1;
}

::-webkit-scrollbar {
  display: none;
}

.logo {
  width: 100%;
  padding: 30rpx;

  .logo_text {
    width: 187rpx;
    height: 60rpx;
    color: #000;
    text-align: center;
    width: 100%;
  }
}

.prize_box {
  width: 674rpx;
  height: 110rpx;
  background: rgba($color: #fff, $alpha: 0.3);
  border: 2rpx solid rgba(255, 255, 255, 0.6);
  padding: 0 30rpx;
  box-sizing: border-box;
  border-radius: 10rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 38rpx 28rpx 38rpx;

  .icon {
    color: #fff;

    .o {
      width: 200rpx;
      height: 34rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 24rpx !important;
    }

    .s {
      font-size: 28rpx;
    }
  }
}

.index_icon {
  width: 100%;
  background: #fff;
  display: flex;
  justify-content: space-between;
  padding: 28rpx 38rpx;

  .item {
    text-align: center;

    image {
      width: 86rpx;
      height: 86rpx;
      margin: 0 auto;
    }
  }

  .span {
    color: #a3a3a3;
  }
}

.goods_list_box {
  position: fixed;
  top: 705rpx; /* 根据实际需求设置 */
  left: 0;
  right: 0;
  bottom: 0;
  // overflow-y: auto; /* 允许垂直滚动 */

  width: 100%;

  .miaosha {
    height: 800rpx; /* 根据实际需求设置 */
    // overflow-y: auto; /* 允许垂直滚动 */
    width: 100%;
    padding: 10rpx;
    // background: #fff;
    border-radius: 20rpx;
    margin-bottom: 20rpx;
  }
}

.goods_item {
  width: 100%;
  padding-top: 20rpx;
  display: flex;
  justify-content: space-between;

  .item {
    width: 308rpx;
    box-sizing: border-box;

    image {
      width: 308rpx;
      height: 308rpx;
      border-radius: 8rpx;
    }

    .name {
      font-size: 26rpx;
      color: #666;
      padding: 4rpx 0;
    }

    .price {
      font-size: 30rpx;
      font-weight: bold;
      color: #ffa911;
    }
  }
}

.pubuBox {
  padding: 15rpx;
}

.pubuItem {
  column-count: 2;
  column-gap: 20rpx;
}

.item-masonry {
  box-sizing: border-box;
  border-radius: 15rpx;
  overflow: hidden;
  background-color: #fff;
  break-inside: avoid;
  /*避免在元素内部插入分页符*/
  box-sizing: border-box;
  margin-bottom: 20rpx;
  box-shadow: 0px 0px 28rpx 1rpx rgba(78, 101, 153, 0.14);
}
.content {
  width: 25%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}
.red-dot {
  position: absolute;
  top: -10px; /* 上面超出图片一半 */
  right: -10px; /* 右侧超出图片一半 */
  width: 20px;
  height: 20px;
  background-color: red;
  border-radius: 50%; /* 使红点变成圆形 */
  display: flex;
  justify-content: center;
  align-items: center;
}

.number {
  color: white;
  font-size: 12px;
}
.item-masonry image {
  width: 100%;
}

.listtitle {
  padding-left: 22rpx;
  font-size: 24rpx;
  padding-bottom: 22rpx;

  .listtitle1 {
    line-height: 39rpx;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    min-height: 39rpx;
    max-height: 78rpx;
  }

  .listtitle2 {
    color: #ff0000;
    font-size: 32rpx;
    line-height: 32rpx;
    font-weight: bold;
    padding-top: 22rpx;

    .listtitle2son {
      font-size: 32rpx;
    }
  }

  .listtitle3 {
    font-size: 28rpx;
    color: #909399;
    line-height: 32rpx;
    padding-top: 22rpx;
  }
}
</style>
